import React, { useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import {
  List,
  Checkbox,
  Tag,
  Dialog,
  Toast,
  Button,
  Modal,
  Form,
  Input,
} from "antd-mobile"
import {
  selectedPerosn,
  deletePerson,
  addPerson,
  editPerson,
} from "../../store/personSlice"
import { DeleteOutline, EditSOutline } from "antd-mobile-icons"
import "./index.css"
import http from "../../utils/http"
const Index = () => {
  // 派发任务
  const dispatch = useDispatch()
  const [form] = Form.useForm()
  const [visible, setVisible] = useState(false)
  // 新增还是编辑
  const [falg, setFlag] = useState(false)
  // 获取仓库的数据
  const { personList } = useSelector(state => state.person)
  // 新增
  const handelAdd = () => {
    setVisible(true)
    setFlag(true)
    form.resetFields()
  }
  // 编辑
  const handelEdit = item => {
    setVisible(true)
    setFlag(false)
    form.setFieldsValue(item)
  }
  // 确认提交表单
  const onFinish = () => {
    if (falg) {
      // 如果为真执行新增操作
      // 创建新增对象
      const addObj = { ...form.getFieldsValue(), status: false, id: Date() }
      dispatch(addPerson(addObj))
    } else {
      // 反之执行编辑操作
      // 创建编辑对象
      const editObj = form.getFieldsValue(true)
      dispatch(editPerson(editObj))
    }
    setVisible(false)
  }
  // 上床身份证
  const handelSendCode = () => {
    const inpDom = document.createElement("input")
    inpDom.type = "file"
    inpDom.click()
    inpDom.onchange = async () => {
      const file = inpDom.files[0]
      const fileData = new FormData()
      fileData.append("file", file)
      const result = await http.post("/orc/upload/image", fileData)
      const { code, message, data } = result.data
      if (code === 200) {
        Toast.show({
          content: message,
          icon: "success",
        })
        form.setFieldsValue(data)
        form.setFieldValue("phone", 17898786541)
      }
    }
  }
  return (
    <div>
      <Button block onClick={() => handelAdd()}>
        添加乘车人
      </Button>
      <List>
        {personList.map((item, ind) => (
          <List.Item
            prefix={
              <div className="person-edit">
                <EditSOutline
                  fontSize={30}
                  color="skyblue"
                  onClick={() => handelEdit(item)}
                />
                {item.id % 2 == 0 ? (
                  <Tag color="success">学生</Tag>
                ) : (
                  <Tag color="warning">儿童</Tag>
                )}
              </div>
            }
            description={
              <div>
                <p>身份证号:{item.code}</p>
                <p>手机号:{item.phone}</p>
              </div>
            }
            key={ind}
            extra={
              <div className="per-dele">
                <DeleteOutline
                  color="red"
                  fontSize={30}
                  onClick={async () => {
                    const result = await Dialog.confirm({
                      content: "确认删除嘛",
                    })
                    if (result) {
                      Toast.show({
                        content: "删除成功",
                        position: "bottom",
                      })
                      dispatch(deletePerson(item))
                    } else {
                      Toast.show({
                        content: "取消了操作",
                        position: "bottom",
                      })
                    }
                  }}
                />
                <Checkbox
                  checked={item.status}
                  onChange={() => dispatch(selectedPerosn(item))}></Checkbox>
              </div>
            }>
            {item.name}
          </List.Item>
        ))}
      </List>
      <Modal
        visible={visible}
        content={
          <div className="person-form">
            <h4>{falg ? "新增乘车人" : "编辑乘车人"}</h4>
            {falg && (
              <div className="per-btn">
                <Button
                  color="primary"
                  size="mini"
                  onClick={() => handelSendCode()}>
                  上传证件识别信息
                </Button>
              </div>
            )}

            <Form
              form={form}
              onFinish={onFinish}
              layout="horizontal"
              footer={
                <Button block type="submit" color="primary" size="large">
                  提交
                </Button>
              }>
              <Form.Item
                name="name"
                label="姓名"
                rules={[{ required: true, message: "姓名不能为空" }]}>
                <Input placeholder="请输入姓名" />
              </Form.Item>
              <Form.Item
                name="code"
                label="身份证"
                rules={[{ required: true, message: "身份证不能为空" }]}>
                <Input placeholder="请输入身份证" />
              </Form.Item>
              <Form.Item
                name="phone"
                label="手机号"
                rules={[{ required: true, message: "手机号不能为空" }]}>
                <Input placeholder="请输入手机号" />
              </Form.Item>
            </Form>
          </div>
        }
        closeOnAction
        onClose={() => {
          setVisible(false)
        }}
        actions={[
          {
            key: "confirm",
            text: "我知道了",
          },
        ]}
      />
    </div>
  )
}

export default Index
